<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
		<title>我的扫雷</title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			@media screen and (min-width:980px){
				.title{
					width: 400px;
					font-size: 40px;
					text-align: center;
					color: #373759;
					margin-top: 50px;
				}
				#app{
					margin: auto;
					width: 408px;
				}
				.header{
					width: 408px;
					height: 50px;
					line-height: 50px;
					font-size: 20px!important;
					display: flex;
					justify-content: space-around;
				}
				.sp{
					color: #333;
				}
				.header button{
					font-size: 20px;
					width: 80px;
					height: 35px;
					margin-top: 7.5px;
					border-radius: 5px;
					outline: none;
					border: none;
				}
				.header button:hover{
					background-color: #0bf;
					color: #fff;
				}
				.outer{
					display: flex;
					flex-wrap: wrap;
					width: 408px;
					height:408px;
					font-size: 18px;
					border: 1px solid #222;
					border-top: 0px;
					border-left: 0px;
					user-select: none;
					background-color: #222;
				}
				.outer:after {
					margin-top: 15px;
					font-size: 14px;
					color: #779;
				    content: '提示：长按标记有雷，点击开启区域';
				}
				.son{
					box-sizing: border-box;
					width: 27.2px;
					height: 27.2px;
					line-height: 27.2px;
					font-size: 0;
					text-align: center;
					background-color: #07a;
					border-top: 1px  solid #222;
					border-left: 1px  solid #222;
				}
				/* 打开的情况 */
				/* 自己不是 */
				.son-danger{
					font-size: 18px;
					color: #f33;
					background-color: #f33;
				}
				/* 自己是 */
				.no{
					font-size: 18px;
					background-color: #fff!important;
				}
			}
			@media screen and (max-width:980px){
				.title{
					font-size: 40px;
					text-align: center;
					color: #f11;
					margin: 20px auto;
				}
				.header{
					margin: 10px auto;
					width: 408px;
					line-height: 40px;
					display: flex;
					font-size: 35px;
					justify-content: space-around;
				}
				.later{
					font-size: 25px;
				}
				.header button{
					font-size: 20px;
					outline: none;
					border: none;
				}
				.outer{
					margin: auto;
					display: flex;
					flex-wrap: wrap;
					width: 90vw;
					height: 90vw;
					font-size: 1.4rem;
					border: 1px solid #222;
					border-top: 0px;
					border-left: 0px;
					user-select: none;
					background-color: #222;
				}
				.son{
					box-sizing: border-box;
					width: 6vw;
					height: 6vw;
					line-height: 6vw;
					font-size: 0;
					text-align: center;
					background-color: #47a;
					border-top: 1px  solid #222;
					border-left: 1px  solid #222;
				}
				/* 打开的情况 */
				/* 自己不是 */
				.son-danger{
					font-size: 20px;
					color: #f99;
					background-color: #f99;
				}
				/* 自己是 */
				.no{
					font-size: 20px;
					font-weight: 700;
					color: #00AAFF;
					background-color: #fff!important;
				}
		</style>
	</head>
	<body>
		<div id="app">
			<h2 class="title">扫雷</h2>
			<div class="header">
				<button @click = "creatGame(40,'begin')">开始</button>
				<div class="later">剩余:{{later}}</div>
				<div class="sp" type="text" /><span v-text="totaltime"></div>
			</div>
			<div class="outer">
				<div 
				class="son" 
				data-did='true'  
				:data-ind='ind' 
				v-for="(items,ind) in son"
				@mousedown="start"  
				@mouseup="open" 
				v-text="items=='danger'?'-1':items"
				></div>
			</div>
		</div>
		<script type="text/javascript">
			window.onload = function(){
				let vue = new Vue({
					el:"#app",
					data:{
						son:new Array(225),
						end:null,
						flagstar:0,
						later:185,
						time:0,
						totaltime:"00:00",
						inter :null,
						now:0,
						state:"ready"
					},
					methods:{
						creatGame(num){
							this.state = 'begin'
							clearInterval(this.inter )
							this.son = new Array(225)
							let flag = num 
							while(flag>0){
							    let local = Math.floor(Math.random()*this.son.length)
							    if(this.son[local]!=="danger"){
							        this.son[local] = "danger"
							        flag--
							    }
							}
							for(let i=0;i<this.son.length;i++){
								if(this.son[i]!='danger'){
									let size = 0
									if(i%15==0){
										// 左边界计算
										for(let j = -1;j<2;j++){
											for(let k = 0;k<2;k++){
												if(this.son[i-15*j+k]=='danger'){
													size++
												}
											}
										}
									}else if(i%15==14){
										// 右侧边界计算
										for(let j = -1;j<2;j++){
											for(let k = -1;k<1;k++){
												if(this.son[i-15*j+k]=='danger'){
													size++
												}
											}
										}
									}else{
										for(let j = -1;j<2;j++){
											for(let k = -1;k<2;k++){
												if(this.son[i-15*j+k]=='danger'){
													size++
												}
											}
										}
									}
									this.son[i] = size==0?" ":size
								}
							}
							this.inter = setInterval(()=>{
								this.time+=1
								let min = this.time
								let second = this.time%60
								min = parseInt(min/60)
								if( this.time<10){
									second = "0"+second
								}
								if(min<10){
									min = "0"+min
								}
								this.totaltime =min +":"+second
							},1000)
						},
						start(){
							this.now = new Date().getTime()
						},
						open(e){
							if(this.state!=='begin'){
								return
							}
							let end = new Date().getTime()-this.now
							// 获取当前节点的自定义data-ind
							let n = e.target
							let ind = n.attributes['data-ind'].nodeValue
							let value = this.son[ind]
							let did = n.attributes['data-did'].nodeValue
						
							// 此区域可点击
							if(did=='true'){
								if(end<200){
									// 短按无雷
									if(value=='danger'){
										// 为雷
										alert('游戏结束')
										window.history.go(0)
									}else{
										// 安全
										if(n.innerText == '💣'){
											n.innerText = value
										}
										// 剩余区域减一
										this.later--
										n.attributes['class'].nodeValue = 'son no'
									}
									if(this.later==0){
										console.log('win')
										alert('成功通关')
									}
									n.attributes['data-did'].nodeValue = false
								}else{
									// 长按有雷
									n.attributes['class'].nodeValue = 'son son-danger'
									n.innerText = '💣'
								}
							}
						}
					}
				})
			}
		</script>
	</body>
</html>